<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html, #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }
	</style>
	<link href="http://cdn.bootcss.com/layer/3.0.1/mobile/need/layer.min.css" rel="stylesheet">
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1aXDtrOmWHBYI2Y7Yavz6cAnlINMP6j4"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
	<script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/mobile/layer.min.js"></script>
	<script src="https://cdn.bootcss.com/json2/20160511/json2.js"></script>
	<script src="style/tools.js"></script>
	<title>wifi热点图</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

    $(function() {
        function getDeviceList(success) {
            var param = {
                createTime: "",
                size: 200
            };
            var url = "https://ichengdu.com/i_chengdu_mobile_web/service/wifiServiceI/getWifiList.do";
            var loading = null;
            $.ajax({
                url: url,
                type: "post",
                data: {
                    param: JSON.stringify(param)
                },
                dataType: "json",
                beforeSend: function() {
                    loading = layerTool.loading();
                },
                success: function(data) {
                    console.log(data);
                    success(data.beans);

                },
                error: function() {
                    layerTool.msg("请求错误");
                },
                complete: function() {
                    layer.close(loading);
                }
            });
        }

        getDeviceList(function(data) {
            var markers = [];
            var nameMap = {};
            $.each(data, function(index, d) {
                if (tools.isNotNull(d.latitude) && tools.isNotNull(d.longitude)) {
                    markers.push({
                        latitude: d.latitude,
                        longitude: d.longitude,
                        hpName: d.hpName,
                        hpCode: d.hpCode,
                        positions: d.positions
                    });


                    nameMap[d.latitude + "-" + d.longitude] = "<div style='font-size:0.4rem;color: #666'>名称:" + d.hpName + "<br/>编号:" + d.hpCode + "<br/>地址:" + d.positions + "</div>";
                }
            });

            baiduMap.addPoint(markers, nameMap);
        });
    });


    var baiduMap = (function() {
        var map = null;
        var _nameMap = {};

        var _opts = {
            width: 230, // 信息窗口宽度
            title: "<p style='font - size: 0.45rem;font - weight: bold;color: #333'>WiFi信息</p>", // 信息窗口标题
            enableMessage: true //设置允许信息窗发送短息
        };

        function openInfo(content, e) {
            var point = new BMap.Point(e.point.lng, e.point.lat);
            console.log(e.point);
            var infoWindow = new BMap.InfoWindow(content, _opts); // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        }

        function _init() {
            // 百度地图API功能
            map = new BMap.Map("allmap");
            var point = new BMap.Point(104.06667, 30.66667);
            map.centerAndZoom(point, 10);
            //var marker = new BMap.Marker(point);  // 创建标注
            //map.addOverlay(marker);               // 将标注添加到地图中


            //地图配置
            var top_left_control = new BMap.ScaleControl({
                anchor: BMAP_ANCHOR_TOP_LEFT
            }); // 左上角，添加比例尺
            var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
            var top_right_navigation = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_RIGHT,
                type: BMAP_NAVIGATION_CONTROL_SMALL
            }); //右上角，仅包含平移和缩放按钮
			/*缩放控件type有四种类型:
			 BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
            //添加控件和比例尺
//      map.addControl(top_left_control);
//      map.addControl(top_left_navigation);
//      map.addControl(top_right_navigation);
            map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
            map.setZoom(13);
            // 添加带有定位的导航控件
            var navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                enableGeolocation: true
            });
            map.addControl(navigationControl);
            // 添加定位控件
            var geolocationControl = new BMap.GeolocationControl();
            geolocationControl.addEventListener("locationSuccess", function(e) {
                // 定位成功事件
                var address = '';
                address += e.addressComponent.province;
                address += e.addressComponent.city;
                address += e.addressComponent.district;
                address += e.addressComponent.street;
                address += e.addressComponent.streetNumber;
                alert("当前定位地址为：" + address);
            });
            geolocationControl.addEventListener("locationError", function(e) {
                // 定位失败事件
                alert(e.message);
            });
            map.addControl(geolocationControl);


            //定位当前位置
            var loading = layerTool.loading("正在获取您的当前位置,请稍后片刻...");
            var geolocation = new BMap.Geolocation();
            var myIcon1 = new BMap.Icon("images/wifi-icon1.png", new BMap.Size(10,15), {
                imageSize: new BMap.Size(10,15)
            });
            geolocation.getCurrentPosition(function(r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(r.point, {
                        icon: myIcon1
                    });
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    //alert('您的位置：'+r.point.lng+','+r.point.lat);
                } else {
                    alert('failed' + this.getStatus());
                }
                layer.close(loading);
            }, {
                enableHighAccuracy: true
            })

        }


        function _addPoint(points) {
            //        var markers = [];
            //        for (var p of points) {
            //            pt = new BMap.Point(p.lng, p.lat);
            //            var mk = new BMap.Marker(pt);
            //            mk.setTitle(p.msg);
            //            mk.addEventListener("click", function (event) {
            //                var target = event.target;
            //                layerTool.alert(target.getTitle());
            //            });
            //            map.addOverlay(mk);
            //            markers.push(mk);
            //        }

            //加载多个普通点


            //加载海量点
            var _points = [];
            var pt = null;
            var x = null;
            var y = null;
            var myIcon = new BMap.Icon("images/wifi-icon2.png", new BMap.Size(10,15), {
                imageSize: new BMap.Size(10,15)
            });
            $.each(points, function(index,p) {
                pt = new BMap.Point(p.longitude, p.latitude);
                var marker2 = new BMap.Marker(pt, {
                    icon: myIcon
                }); // 创建标注
                marker2.setTitle(p.latitude + "-" + p.longitude);
                marker2.addEventListener('click', function(e) {
                    var key = this.getTitle();
                    var msg = _nameMap[key];
                    openInfo(msg, e);
                });
                map.addOverlay(marker2);
            })

            //            var op = {
            ////                size: BMAP_POINT_SIZE_BIG,
            //                  shape: BMAP_POINT_SHAPE_WATERDROP,
            ////                color: '#d340c3'
            //            };
            //            var pointCollection = new BMap.PointCollection(_points, op);
            //            var myIcon = new BMap.Icon("./wifi-icon.png", new BMap.Size(20,30),{imageSize:new BMap.Size(20,30)});
            //            var marker2 = new BMap.Marker(_points,{icon:myIcon});  // 创建标注
            //            map.addOverlay(marker2);
            //具体地点点击弹窗。

            //            map.addOverlay(pointCollection);  // 添加Overlay

            //加载聚合点
            //var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});

        }

        _init();

        return {
            addPoint: function(points, nameMap) {
                _addPoint(points);
                _nameMap = nameMap;
            }
        }
    })();

</script>

